<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			
			请实现问题4.gif的效果
			注意:
			1.鼠标移上去火箭时会变化
			2.火箭与滚动条同时到顶(动画时间为1s),并且动画完成后,火箭会回到原位
			3.火箭升空时,有动画切换以求达到真实感觉
			4.请使用img/rocket_button_up.png进行火箭切换
		-->
		
		
		<!--
			1.如何获取滚动条的高度  scrollTop
			2.如何获取火箭的高度offsetTop
			3.火箭的动画的切换
			4.滚动条移动到最顶端
			5.火箭移动到最顶端
			6.同时到达最顶端
		-->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.web {
				height: 10000px;
				background: linear-gradient(#fff, #000);
			}
			
			.rocket {
				width: 149px;
				height: 249px;
				background: url(../img/rocket_button_up.png) 0% 0%;
				position: fixed;
				top: 420px;
				right: 20px;
			}

		</style>
		<div class="web">

		</div>
		<div class="rocket">

		</div>
		<script type="text/javascript">
			// offsetTop = top
			var rocket = document.querySelector('.rocket');

			// console.log(rocket.offsetTop);
			// console.log(window.getComputedStyle(rocket,null).getPropertyValue('top'));
			var stop;
			var rocketStopPlace = rocket.offsetTop;
			rocket.style.top = rocket.offsetTop + 'px';
			rocket.style.background = window.getComputedStyle(rocket,null).getPropertyValue('background');
			var arr = ['0%','20%','40%','60%','80%','100%'];
			var i = 1;
			
			rocket.addEventListener('mouseover',openFire);

			rocket.addEventListener('mouseout',shutDown);

			function openFire () {
				rocket.style.backgroundPosition = arr[1] + '';
			}

			function shutDown () {
				rocket.style.backgroundPosition = arr[0] + '';
			}
	
			rocket.addEventListener('click',() => {
					rocket.removeEventListener('mouseout',shutDown);
			 			end = setInterval( () => {
			 				rocket.style.backgroundPosition = arr[i] + '';
			 				if ( i == arr.length-1 ){
			 					i = 2;
			 				}
			 				i++	;	

			 			},150);	

			

			 			setTimeout( () => {		 				
			 				stop = setInterval( () => {
								document.documentElement.scrollTop -= 100;
								if ( document.documentElement.scrollTop < 7000 ) {
									rocket.style.top = parseInt(rocket.style.top) - 100 + 'px';
								}else{
									rocket.style.top = parseInt(rocket.style.top) - 10 + 'px';
								}	

								if ( rocket.offsetTop < -500 ){
									document.documentElement.scrollTop = 0;
									clearInterval(stop);
									rocket.style.top = rocketStopPlace + 'px';
									clearInterval(end);
									rocket.style.backgroundPosition = arr[0] + '';
									rocket.addEventListener('mouseout',shutDown);
								}

							},100);

			 			},2000);
					 				 	
			});



					
		</script>
	</body>

</html>